<template>
  <div class="page-container">
    <!--工具栏-->
    <div
      class="toolbar"
      style="float:left;padding-top:10px;padding-left:15px;width: 100%;"
    >
      <el-steps
        :active="active"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="1、设置促销规则"></el-step>
        <el-step title="2、选择参与商家/店铺"></el-step>
        <el-step title="3、添加活动商品"></el-step>
        <el-step title="4、提交审核"></el-step>
      </el-steps>
      <!--第一步-->
      <div v-show="active == 1">
        <form class="form-horizontal mgt15">
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            基本信
          </div>
          <div class="form-group">
            <!--活动名称-->
            <label class="col-sm-2 control-label ng-binding">促销活动名称</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-input v-model="dataForm.promName" placeholder="限制在64个字符以内"></el-input>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--活动时间-->
            <label class="col-sm-2 control-label ng-binding">活动时间</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-date-picker
                v-model="dataForm.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动开始"
                class="input_postion"
              ></el-date-picker
              >
              至
              <el-date-picker
                v-model="dataForm.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动结束"
                class="input_postion"
              ></el-date-picker>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            活动规则
          </div>
          <div class="form-group ng-scope">
            <!--选品范围(参与)-->
            <label class="col-sm-2 control-label ng-binding">选品范围</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="dataForm.selectionRange">
                <el-radio :label="1" class="form-radio">部分参与</el-radio>
                <el-radio :label="2" class="form-radio">全场参与</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-group ng-scope " style="margin-top: 45px;">
            <!--促销类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">促销类型</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="dataForm.frontPromType" @change="changeFrontPromType">
                <el-radio :label="12" class="form-radio">第X件Y折</el-radio>
                <el-radio :label="13" class="form-radio">第X件Y元</el-radio>
                <el-radio :label="14" class="form-radio">满X件Y折</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-group ng-scope " style="margin-top: 75px;">
            <!--促销类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding"
            >是否叠加应用</label
            >
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="isChange" @change="changeRadio">
                <el-radio :label="0" class="form-radio"
                >否（超量：按最高层级享受优惠）
                </el-radio
                >
                <el-radio :label="1" class="form-radio"
                >是（倍量：每满一级优惠一次），上限
                </el-radio
                >
              </el-radio-group>
              <el-input
                v-model="upNumber"
                style="width: 200px; margin-left: 50px;"
                :disabled="inputDisabled"
              ></el-input
              >
              次
            </div>
          </div>

          <div class="form-group ng-scope " style="margin-top:120px;">
            <label class="col-sm-2 control-label ng-binding">优惠设置</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-table :data="couponSetData" style="width:1200px">
                <el-table-column prop="couponSetindex" label="优惠阶梯">
                  <template slot-scope="scope">
                    <label>{{ scope.$index + 1 }}</label>
                  </template>
                </el-table-column>
                <el-table-column prop="content" label="优惠门槛">
                  <template slot-scope="scope">
                    <div v-if="showFrontPromType1">
                      第
                      <el-input
                        v-model="scope.row.favourableCondition"
                        placeholder="X"
                        style="width:100px"
                        @input="changeFavourableCondition(scope.row.favourableCondition,scope.$index)"
                      ></el-input
                      >
                      件 打
                      <el-input
                        v-model="scope.row.favourableContent"
                        placeholder="Y"
                        style="width:100px"
                        @input="changeFavourableContent(scope.row.favourableContent,scope.$index)"
                      ></el-input
                      >
                      折
                    </div>
                    <div v-if="showFrontPromType2">
                      第
                      <el-input
                        v-model="scope.row.favourableCondition"
                        placeholder="X"
                        style="width:100px"
                        @input="changeFavourableCondition(scope.row.favourableCondition,scope.$index)"
                      ></el-input
                      >
                      件
                      <el-input
                        v-model="scope.row.favourableContent"
                        placeholder="Y"
                        style="width:100px"
                        @input="changeFavourableContent(scope.row.favourableContent,scope.$index)"
                      ></el-input
                      >
                      元
                    </div>
                    <div v-if="showFrontPromType3">
                      满
                      <el-input
                        v-model="scope.row.favourableCondition"
                        placeholder="X"
                        style="width:100px"
                        @input="changeFavourableCondition(scope.row.favourableCondition,scope.$index)"
                      ></el-input
                      >
                      件 打
                      <el-input
                        v-model="scope.row.favourableContent"
                        placeholder="Y"
                        style="width:100px"
                        @input="changeFavourableContent(scope.row.favourableContent,scope.$index,scope.row)"
                      ></el-input
                      >
                      折
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="explain" label="优惠说明">
                  <template slot-scope="scope">
                    <div v-if="showFrontPromType1"> <label >第{{favourableCondition[scope.$index]}}件;打{{favourableContent[scope.$index]}}折;</label></div>
                    <div  v-if="showFrontPromType2"> <label>第{{favourableCondition[scope.$index]}}件;{{favourableContent[scope.$index]}}元;</label></div>
                    <div  v-if="showFrontPromType3" > <label>满{{favourableCondition[scope.$index]}}件;打{{favourableContent[scope.$index]}}折;</label></div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="scope.$index != 0"
                      @click="removeCouponSet(scope.$index, scope.row)"
                    >删除
                    </el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                style=" margin-top: 10px;"
                @click="addCouponSet"
                v-show="addCouponSetShow"
              >新增优惠
              </el-button
              >
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <label class="col-sm-2 control-label ng-binding">活动描述</label>
            <div class="col-sm-9">
              <label class="col-sm-1 ng-binding">中文</label>
              <div class="col--sm-4">
                <el-input
                  type="text"
                  class="form-control mgB10 ng-pristine ng-valid"
                  maxlength="100"
                  v-model="dataForm.description"
                  :placeholder="descriptions"
                ></el-input>
              </div>
              <div class="col--sm-12">
                <label class="mgB0 ng-binding"
                >注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label
                >
                <a
                  href
                  style="color:blue;text-decoration:underline;"
                  data-toggle="modal"
                  data-target="#custom-width-modal-img"
                >
                  <!-- <i class="ng-binding">查看示例</i> -->
                </a>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">
            交易规则
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--是否排斥优惠券-->
            <label class="col-sm-2 control-label ng-binding"
            >是否排斥优惠券</label
            >
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="dataForm.rejectCouponsFlag">
                <el-radio :label="1" class="form-radio">是</el-radio>
                <el-radio :label="0" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <!--是否包邮-->
            <label class="col-sm-2 control-label ng-binding">是否包邮</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="dataForm.parcelsFlag">
                <el-radio :label="1" class="form-radio">是</el-radio>
                <el-radio :label="0" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            参与条件
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
            <!--活动渠道-->
            <div
              class="line line-dashed b-b line-lg"
              ng-show="promotionDetailContent.channelCodes.length > 0"
            ></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
              <label class="col-sm-2 control-label ng-binding">活动渠道</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="dataForm.channelCodes" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in chanelCodesRadios" :label="item.code" :key="item.code">{{item.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
            <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
              <label class="col-sm-2 control-label ng-binding">活动平台</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate1"
                  v-model="checkAll1"
                  @change="handleCheckAllChange1"
                >全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="dataForm.proPlatform" @change="handleCheckedCitiesChange1">
                  <el-checkbox v-for="city in proPlatformRadios" :label="city.code" :key="city.code">{{city.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">新老用户</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate2"
                  v-model="checkAll2"
                  @change="handleCheckAllChange2"
                >全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="dataForm.proUserType" @change="handleCheckedCitiesChange2">
                  <el-checkbox v-for="city in proUserTypeRadios" :label="city.code" :key="city.code">{{city.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">会员分组</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate3"
                  v-model="checkAll3"
                  @change="handleCheckAllChange3"
                >全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="dataForm.proMemberType" @change="handleCheckedCitiesChange3">
                  <el-checkbox v-for="city in proMemberTypeRadios" :label="city.code" :key="city.code">{{city.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 会员等级(修改) -->
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate4"
                  v-model="checkAll4"
                  @change="handleCheckAllChange4"
                >全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="dataForm.proMemberLevel" @change="handleCheckedCitiesChange4">
                  <el-checkbox v-for="city in proMemberLevelRadios" :label="city.code" :key="city.code">{{city.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div
              class="form-group ng-scope"
              ng-if="promotionDetailContent.promotionType != 12"
            >
              <!--备注-->
              <label class="col-sm-2 control-label ng-binding">备注</label>
              <div class="col-sm-10 pdt3px themeTextColor">
                <quill-editor
                  v-model="content"
                  ref="myQuillEditor"
                  style="height: 300px;"
                  :options="editorOption"
                ></quill-editor>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-container" v-show="active==2">
        <!--第二步-->
        <AddOrUpdateXofferPromotion2 ref="AddOrUpdateXofferPromotion2"></AddOrUpdateXofferPromotion2>
      </div>
      <!--第三步-->
      <div class="tab-container" v-show="active==3">
        <AddOrUpdateXofferPromotion3 ref="AddOrUpdateXofferPromotion3"></AddOrUpdateXofferPromotion3>
      </div>
      <!--第四步-->
      <div class="tab-container" v-show="active == 4">
        <div style="font-size:25px;text-align: center;margin-top: 27px;">
          <el-alert
            title="等待审核,审核通过后立即生效"
            type="success"
            center
          ></el-alert>
        </div>
      </div>
    </div>
    <div>
      <el-button style="margin-top: 60px;margin-bottom: 60px;" @click="next"
      >下一步
      </el-button
      >
    </div>
    <el-dialog
      :title="'添加参与店铺'"
      width="40%"
      :visible.sync="editDialogVisible2"
      :close-on-click-modal="false"
    >
      <div>
        <div>
          <el-form :inline="true" :model="dataForm" size="mini">
            <el-form-item label="店铺名称" label-width="100px">
              <el-input
                v-model="dataForm.shopname"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="店铺编号" label-width="100px">
              <el-input
                v-model="dataForm.shopnumber"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属商家编号" label-width="100px">
              <el-input
                v-model="dataForm.shopnumber"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属商家名称" label-width="100px">
              <el-input
                v-model="dataForm.shopnumber"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button size="mini" @click="querySupplierListForAdd2()"
          >查询
          </el-button
          >
          <el-button size="mini" @click="querySupplierListForAdd2()"
          >重置
          </el-button
          >
        </div>
        <div style="padding-top: 45px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="addSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="店铺编号"></el-table-column>
            <el-table-column
              prop="productName"
              label="店铺名称"
            ></el-table-column>
            <el-table-column
              prop="productName"
              label="所属商家"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false"
        >取消
        </el-button
        >
        <el-button :size="size" type="primary" @click="addShop">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导入、上传弹窗-->
    <el-dialog
      :title="operation ? '商品导入' : '下载模板'"
      :inline="true"
      width="20%"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
    >
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation"
        >商品导入模板
        </el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload"
          v-show="operation == false"
        >商品导入
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {quillEditor} from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import AddOrUpdateXofferPromotion2 from "./AddOrUpdateXofferPromotion2";
  import AddOrUpdateXofferPromotion3 from "./AddOrUpdateXofferPromotion3";
  import {
    singleFrontPromTypesRadio,
    chanelCodesRadio,
    proPlatformRadio,
    proUserTypeRadio,
    proMemberTypeRadio,
    proMemberLevelRadio,
  } from "@/market/dict/marketDict";
  export default {
    name: "Tab",
    components: {
      KtButton,
      TableColumnFilterDialog,
      quillEditor,
      AddOrUpdateXofferPromotion2,
      AddOrUpdateXofferPromotion3
    },
    data() {
      return {
        promotionId:this.$route.params.promotionId,
        descriptions:"第X件打Y折",
        favourableCondition:["X"],
        favourableContent:["Y"],
        showFrontPromType1: true,
        showFrontPromType2: false,
        showFrontPromType3: false,
        tabbleSupplierData: [],
        showTable: false,
        upNumber: "",
        addCouponSetShow: true,
        inputDisabled: true,
        couponSetData: [{index: 1, favourableCondition: 0, favourableContent: 0,explain:""}],
        editBusinessDialogVisible: false,
        editDialogVisible: false,
        editDialogVisible2: false,
        url: "./static/shop.png",
        url2: "./static/shop2.png",
        content: null,
        editorOption: {},
        size: "small",
        productVisible: false,
        uploadVisible: false,
        operation: false, // true:商品导入, false:下载模板
        activeName: 0,
        setUp: false,
        search: false,
        filters: {},
        editLoading: false,
        modalShow: 1,
        multipleSelection: [],
        repelSelection: [],
        addSelection: [],
        businessList: [{id: "001", name: "张小二服饰", type: "自营商家"}],
        shopList: [{id: "161616", name: "张小二bbc店铺", type: "直营"}],
        tableData: [
          {
            id: 1912250010887324,
            productName: "新供应商001",
            unit: "件",
            shopName: "张小二服饰",
            price: 1.2,
            markdown: 1,
            shopLimit1: 100,
            shopLimit2: 100,
            shopLimit3: 100
          },
          {
            id: 19122500108,
            productName: "新供应商",
            unit: "箱",
            shopName: "奥利奥",
            price: 1.2,
            markdown: 1,
            shopLimit1: 100,
            shopLimit2: 100,
            shopLimit3: 100
          }
        ],
        active: 1,
        radio1: 3,
        isChange: 0,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        shopList: [],
        businessList: [],
        checkAll: false,
        checkAll1: false,
        checkAll2: false,
        checkAll3: false,
        checkAll4: false,
        isIndeterminate: true,
        isIndeterminate1: true,
        isIndeterminate2: true,
        isIndeterminate3: true,
        isIndeterminate4: true,
        frontPromTypesRadios: singleFrontPromTypesRadio,
        chanelCodesRadios: chanelCodesRadio,
        proPlatformRadios: proPlatformRadio,
        proUserTypeRadios: proUserTypeRadio,
        proMemberTypeRadios: proMemberTypeRadio,
        proMemberLevelRadios: proMemberLevelRadio,
        dataForm: {
          id: 0,
          promName: "",
          startTime: "",
          endTime: "",
          promType: 7,
          frontPromType: 12,
          selectionRange: 1,
          overlayAppNum: 0,
          rejectCouponsFlag: 1,
          parcelsFlag: 0,
          overLimitRule: 0,
          channelCodes: [],
          proPlatform: [],
          proUserType: [],
          proMemberType: [],
          proMemberLevel: [],
          status: 0,
          ruleDesc: "",
          description:""
        },
      };
    },
    methods: {
      //优惠说明
      changeFavourableContent:function(data,index){
        this.favourableContent[index]=data
      },
      //优惠说明
      changeFavourableCondition:function(data,index,row){
        this.favourableCondition[index]=data
      },
      //促销类型
      changeFrontPromType: function (data) {
          this.favourableCondition=["X"]
          this.favourableContent=["Y"]
        if (data == 12) {
          this.showFrontPromType1 = true
          this.showFrontPromType2 = false
          this.showFrontPromType3 = false
          this.couponSetData = [{index: 1, favourableCondition: 0, favourableContent: 0,explain:""}],
          this.descriptions="第X件打Y折"
        } else if (data == 13) {
          this.showFrontPromType1 = false
          this.showFrontPromType2 = true
          this.showFrontPromType3 = false
          this.couponSetData = [{index: 1, favourableCondition: 0, favourableContent: 0,explain:""}],
          this.descriptions="第X件打Y元"
        } else {
          this.showFrontPromType1 = false
          this.showFrontPromType2 = false
          this.showFrontPromType3 = true
          this.couponSetData = [{index: 1, favourableCondition: 0, favourableContent: 0,explain:""}],
          this.descriptions="满X件打Y折"
        }
      },
      //移除店铺
      removeShop: function (index, row) {
        let this_ = this;
        var temp = [];
        $.each(this_.shopList, function (key, val) {
          if (key == index) {
          } else {
            temp.push(val);
          }
        });
        this_.shopList = temp;
      },
      //移除商铺
      removeBusiness: function (index, row) {
        let this_ = this;
        var temp = [];
        $.each(this_.businessList, function (key, val) {
          if (key == index) {
          } else {
            temp.push(val);
          }
        });
        this_.businessList = temp;
      },
      //添加供应商
      saveSupplier: function (data) {
        this.tabbleSupplierData = this.tabbleSupplierData.concat(this.addSelection)
        this.showTable = true
        this.editDialogVisible = false
      },
      //添加商品
      addProduct: function (data) {
        if (this.addSelection.length == 0) {
          this.$message({message: "请选择店铺", type: "error"});
        } else {
          this.tableData = this.tableData.concat(this.addSelection);
          this.tableData1 = this.addSelection;
          this.$message({message: "操作成功", type: "success"});
          this.productVisible = false;
          this.addSelection = [];
        }
      },
      // 批量删除添加商品
      delMerchantProducts: function (data) {
        this.$message({message: "操作成功", type: "success"});
      },
      // 添加商铺
      addShop: function (data) {
        if (this.addSelection.length == 0) {
          this.$message({message: "请选择店铺", type: "error"});
        } else {
          this.shopList = this.addSelection;
          this.$message({message: "操作成功", type: "success"});
          this.editDialogVisible2 = false;
        }
      },
      // 添加商家
      addBusiness: function (data) {
        console.log(this.addSelection);
        if (this.addSelection.length == 0) {
          this.$message({message: "请选择商家", type: "error"});
        } else {
          this.businessList = this.addSelection;
          this.$message({message: "操作成功", type: "success"});
          this.editBusinessDialogVisible = false;
        }
      },
      changeRadio: function (data) {
        if (data == 0) {
          this.addCouponSetShow = true;
          this.inputDisabled = true;
        } else {
          this.addCouponSetShow = false;
          this.inputDisabled = false;
          this.couponSetData = [{index: 1}];
        }
      },
      removeCouponSet: function (index, row) {
        let this_ = this;
        var temp = [];
        $.each(this_.couponSetData, function (key, val) {
          if (key == index) {
          } else {
            temp.push(val);
          }
        });

        this_.couponSetData = temp;
      },
      addCouponSet: function (data) {
        let this_ = this;
        let index = this_.couponSetData.length + 1;
        let obj ={index};
        this.favourableCondition[this_.couponSetData.length]="X"
        this.favourableContent[this_.couponSetData.length]="Y"
        this_.couponSetData.push(obj);
      },
      //活动渠道
      handleCheckAllChange(val) {
        this.filters.channelCodes = val ? chanelCodesRadio.map(function (value, index, array) {
          return value.code
        }) : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.chanelCodesRadios.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.chanelCodesRadios.length;
      },
      //活动平台
      handleCheckAllChange1(val) {
        this.filters.proPlatform = val ? proPlatformRadio.map(function (value, index, array) {
          return value.code
        }) : [];
        this.isIndeterminate1 = false;
      },
      handleCheckedCitiesChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.proPlatformRadios.length;
        this.isIndeterminate1 =
          checkedCount > 0 && checkedCount < this.proPlatformRadios.length;
      },

      //新老用户
      handleCheckAllChange2(val) {
        this.filters.proUserType = val ? proUserTypeRadio.map(function (value, index, array) {
          return value.code
        }) : [];
        this.isIndeterminate2 = false;
      },
      handleCheckedCitiesChange2(value) {
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.proUserTypeRadios.length;
        this.isIndeterminate2 =
          checkedCount > 0 && checkedCount < this.proUserTypeRadios.length;
      },
      //会员类型
      handleCheckAllChange3(val) {
        this.filters.proMemberType = val ? proMemberTypeRadio.map(function (value, index, array) {
          return value.code
        }) : [];
        this.isIndeterminate3 = false;
      },
      handleCheckedCitiesChange3(value) {
        let checkedCount = value.length;
        this.checkAll3 = checkedCount === this.proMemberTypeRadios.length;
        this.isIndeterminate3 =
          checkedCount > 0 && checkedCount < this.proMemberTypeRadios.length;
      },
      //会员等级
      handleCheckAllChange4(val) {
        this.filters.proMemberLevel = val ? proMemberLevelRadio.map(function (value, index, array) {
          return value.code
        }) : [];
        this.isIndeterminate4 = false;
      },
      handleCheckedCitiesChange4(value) {
        let checkedCount = value.length;
        this.checkAll4 = checkedCount === this.proMemberLevelRadios.length;
        this.isIndeterminate4 =
          checkedCount > 0 && checkedCount < this.proMemberLevelRadios.length;
      },
      querySupplierListForAdd() {
        this.editBusinessDialogVisible = true;
      },
      querySupplierListForAdd2() {
        this.editDialogVisible2 = true;
      },
      querySupplierListForAdd3() {
        this.editDialogVisible = true;
      },
      delAllSelectedSupplier() {
      },
      next() {
        let _this = this;
        let callback = function (res) {
          if (res.code == "0000") {
            _this.promotionId = res.data;
            _this.$refs.AddOrUpdateXofferPromotion2.init(res.data);
            _this.addActive();
          } else {
            _this.$message({message: "操作失败", type: "fail"});
            _this.active = 1;
          }
        };
        let callbackUpdate = function (res) {
          if (res.code == "0000") {
            _this.addActive();
            _this.mainMerchantFormFind();
            _this.mainStoreTableDataFormFind();
          } else {
            _this.$message({message: "操作失败", type: "fail"});
            _this.active = 1;
          }
        };
        //保存活动基础配置
        if (this.active == 1) {
          let this_=this
          if(this_.dataForm.description==''||this_.dataForm.description==null){
            this_.dataForm.description=this_.descriptions;
          }else {

          }
          this_.dataForm.promotionSingleProductRuleList = this_.couponSetData
          this_.dataForm.contentType = this_.dataForm.frontPromType
          this.utils.request.savePromotionSingleProduct(this.dataForm, callback);
          // if(this.promotionId == null){
          //   this.dataForm.promotionSingleProductRuleList=this.couponSetData
          //   this.utils.request.savePromotionSingleProduct(this.dataForm,callback);
          // }else{
          //   this.utils.request.promotionUpdate(this.dataForm,callbackUpdate);
          // }

        }
        if (this.active == 2) {
          this.$refs.AddOrUpdateXofferPromotion3.init(this.promotionId);
          this.$refs.AddOrUpdateXofferPromotion3.getProductListV2(0);
        }
        //更新活动状态
        if (this.active == 3 || this.active == 4) {
          let callback = function (res) {
            if (res.code == "0000") {
              _this.addActive();
            } else {
              console.log("修改失败");
              _this.addActive();
            }
          };
          let params = {"promotionId": this.promotionId, "status": this.active == 3 ? 2 : 3}
          this.utils.request.promotionUpdateStatus(params, callback);
        }
        if (this.active == 2) {
          this.addActive();
        }
        if (this.active == 4) {
          this.$message({message: "操作成功", type: "success"});
          return;
        }

      },
      addActive(){
        if(this.active++ > 3){
          this.$router.push({
            path:"/pages/promotionManagement/xofferPromotion"
          })
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      repelSelectionChange(val) {
        this.repelSelection = val;
      },
      addSelectionChange(val) {
        this.addSelection = val;
      },

      handleClick(tab, event) {
        console.log(tab, event);
        if (tab.name == "0") {
          // 触发‘配置管理’事件
          this.first();
        } else {
          // 触发‘用户管理’事件
          this.second();
        }
      },
      first() {
        console.log("生效商品");
        this.modalShow = 1;
      },
      second() {
        console.log("互斥商品");
        this.modalShow = 2;
      },
      //添加商品弹窗
      productSelectionModal() {
        this.productVisible = true;
      },
      showBatchSetUp() {
        if (this.search == true) {
          this.search = false;
        }
        if (this.setUp == false) {
          this.setUp = true;
        } else if (this.setUp == true) {
          this.setUp = false;
        }
      },
      showQueryCondition() {
        if (this.setUp == true) {
          this.setUp = false;
        }
        if (this.search == false) {
          this.search = true;
        } else if (this.search == true) {
          this.search = false;
        }
      },
      batchReAdd() {
        if (this.multipleSelection.length < 1) {
          this.$message({message: "请选择要设置的商品", type: "error"});
          return false;
        }
        this.$message({message: "操作成功", type: "success"});
      },
      updatePriceAndLimit() {
      },
      importCommodityModal(val) {
        if (val === 1) {
          this.operation = true;
        } else if (val == 2) {
          this.operation = false;
        }
        this.uploadVisible = true;
      },
      //获取单X详情
      queryPromotionDetail(){
        if(this.promotionId!=null&&this.promotionId!=""){
          this.utils.request.queryPromotionDetail(this.dataForm,function (res) {

          });
        }
      }
    },
    mounted() {
    }
  };
</script>

<style scoped>
  .pdL10 {
    padding-left: 10px !important;
  }

  .mgB15 {
    margin-bottom: 15px !important;
  }

  .border-left {
    border-left: 3px #ddd solid !important;
  }

  .font-bold {
    font-weight: 700;
  }

  .form-group {
    margin-bottom: 15px !important;
    margin-right: -0px !important;
    margin-left: -0px !important;
  }

  .form-horizontal .control-label {
    padding-top: 5px;
    margin-bottom: 0;
    text-align: right;
  }

  .form-horizontal div {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    word-wrap: break-word;
  }

  .form-horizontal .control-label {
    padding-top: 3px !important;
  }

  .col-sm-2 {
    width: 16.66666667%;
  }

  /* .col-sm-10 {
      width: 83.33333333%;
  } */
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }

  .col-xs-1,
  .col-sm-1,
  .col-md-1,
  .col-lg-1,
  .col-xs-2,
  .col-sm-2,
  .col-md-2,
  .col-lg-2,
  .col-xs-3,
  .col-sm-3,
  .col-md-3,
  .col-lg-3,
  .col-xs-4,
  .col-sm-4,
  .col-md-4,
  .col-lg-4,
  .col-xs-5,
  .col-sm-5,
  .col-md-5,
  .col-lg-5,
  .col-xs-6,
  .col-sm-6,
  .col-md-6,
  .col-lg-6,
  .col-xs-7,
  .col-sm-7,
  .col-md-7,
  .col-lg-7,
  .col-xs-8,
  .col-sm-8,
  .col-md-8,
  .col-lg-8,
  .col-xs-9,
  .col-sm-9,
  .col-md-9,
  .col-lg-9,
  .col-xs-10,
  .col-sm-10,
  .col-md-10,
  .col-lg-10,
  .col-xs-11,
  .col-sm-11,
  .col-md-11,
  .col-lg-11,
  .col-xs-12,
  .col-sm-12,
  .col-md-12,
  .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  label {
    font-weight: normal;
  }

  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .form-group .pdt3px {
    padding-top: 3px;
  }

  .b-b {
    border-bottom: 1px solid #dddddd;
  }

  .line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
  }

  .line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
  }

  table {
    background-color: transparent;
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
  }

  .i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
  }

  .radio-inline,
  .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
  }

  .panel-body tr {
    padding: 0 15px;
  }

  .mgt15 {
    margin-top: 15px;
  }
</style>
